<template>
    <div class="customer-tracking">
        <div class="nine-title">编辑客户信息</div>

        <el-form :label-position="labelPosition" size="small" ref="formRef" :model="form">
            <el-tabs type="border-card" class="grid-list">
                <el-tab-pane label="客户基本信息">
                    <el-row :gutter="50">
                        <el-col :span="6">
                            <el-form-item label="公司名称">
                                <el-input v-model="form.company_name" placeholder="请输入公司名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客户姓名">
                                <el-input v-model="form.customer_name" placeholder="请输入客户姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="手机号码">
                                <el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合作时间">
                                <el-date-picker
                                        style="width: 100%;"
                                        v-model="form.cooperation_time"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="50">
                        <el-col :span="6">
                            <el-form-item label="客户网址">
                                <el-input v-model="form.url" placeholder="请输入客户网址"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="上线时间">
                                <el-date-picker
                                        style="width: 100%;"
                                        v-model="form.online_time"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客服人员">
                                <el-input v-model="form.customer_service" placeholder="请输入客服人员"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="服务状态">
                                <el-select v-model="form.status" placeholder="请选择" style="width: 100%;">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="50">
                        <el-col :span="6">
                            <el-form-item label="支付方式">
                                <el-select v-model="form.payment_method" placeholder="请选择支付方式" style="width: 100%;">
                                    <el-option
                                            v-for="item in paymethods"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="是否需要开发票">
                                <el-select v-model="form.is_invoice" placeholder="请选择是否需要开发票" style="width: 100%;">
                                    <el-option
                                            v-for="item in invoicelist"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="流失日期(非必填)">
                                <el-date-picker
                                        style="width: 100%;"
                                        v-model="form.drain_time"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="50">
                        <el-col :span="12">
                            <el-form-item label="流失原因(非必填)">
                                <el-input type="textarea" v-model="form.drain_remark" placeholder="请输入客户流失原因"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>

            <el-tabs type="border-card" class="grid-list">
                <el-tab-pane label="关键词选定">
                    <el-row :gutter="50">
                        <el-col :span="6">
                            <el-form-item label="核心词">
                                <el-input v-model="form.core_words" placeholder="请输入核心词"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="搜索指数词">
                                <el-input v-model="form.index_word" placeholder="请输入搜索指数词"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="长尾词">
                                <el-input v-model="form.long_tail_word" placeholder="请输入长尾词"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>

            <el-tabs type="border-card" class="grid-list">
                <el-tab-pane label="定位">
                    <el-row :gutter="50">
                        <el-col :span="6">
                            <el-form-item label="产品定位">
                                <el-input v-model="form.product_position" placeholder="请输入产品定位"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商业模式定位">
                                <el-input v-model="form.business_model" placeholder="请输入商业模式定位"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="核心竞争力">
                                <el-input v-model="form.competitive" placeholder="请输入核心竞争力"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客户群体">
                                <el-input v-model="form.customer_position" placeholder="请输入客户群体"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="50">
                        <el-col :span="6">
                            <el-form-item label="核心词">
                                <el-input v-model="form.position_words" placeholder="请输入潜在客户的核心词"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客户定位(客户的客户群体)">
                                <el-input v-model="form.customer_position2" placeholder="请输入潜在客户的客户群体"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>

            <el-tabs type="border-card" class="grid-list">
                <el-tab-pane label="其它信息">
                    <el-row :gutter="50">
                        <el-col :span="12">
                            <el-form-item label="产品优势">
                                <el-input type="textarea" v-model="form.product_advantages" placeholder="请输入产品优势"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业背景">
                                <el-input type="textarea" v-model="form.enterprise_background" placeholder="请输入企业背景"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>

                    <el-row :gutter="50">
                        <el-col :span="12">
                            <el-form-item label="制作工艺">
                                <el-input type="textarea" v-model="form.technology" placeholder="请输入制作工艺"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="同行标杆">
                                <el-input type="textarea" v-model="form.peer" placeholder="请输入客户定位"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>

            <el-tabs type="border-card" class="grid-list">
                <el-tab-pane label="备注">
                    <el-form-item prop="remark">
                        <el-input type="textarea" :rows="5" placeholder="请输入备注内容" v-model="form.remark">
                        </el-input>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
            <el-row class="text-center">
                <el-button class="nine-btsss" type="primary" @click="submits()">提交</el-button>
            </el-row>
        </el-form>
    </div>
</template>

<script>
	import {Message} from 'element-ui';
    export default {
        data() {
            return {
                labelPosition: 'left',
                options: [{
                    value: '1',
                    label: '服务中'
                }, {
                    value: '0',
                    label: '已流失'
                }],
                paymethods: [
                    {
                        value: '0',
                        label: '月付'
                    }, {
                        value: '1',
                        label: '季付'
                    }, {
                        value: '2',
                        label: '半年付'
                    }, {
                        value: '3',
                        label: '年付'
                    }
                ],
                invoicelist: [
                   {
                        value: '0',
                        label: '九天科技普票'
                    },
					{
					     value: '1',
					     label: '九天科技专票'
					 },
					 {
					      value: '2',
					      label: '九天服务普票'
					  },
					  {
					       value: '3',
					       label: '九天服务专票'
					   }, {
					       value: '4',
					       label: '不开票'
					   },
                ],
				id:0,
                form: {
                   
                },
            }
        },
        mounted() {
            // 没有 id 是新增 有id是修改
            this.id=this.getUrlKey('id');
			if(this.id>0){
				this.$http.post("customers/info",{id: this.id}).then((response) => {
					this.form=response.data.info;
					this.form.status=this.form.status.toString();
					this.form.payment_method=this.form.payment_method.toString();
					this.form.is_invoice=this.form.is_invoice.toString();
				})
			}
        },
		
        methods: {
			getUrlKey (name) {
			        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
			    },
           submits() {
           	var thas=this;
               this.$refs['formRef'].validate((valid) => {
                   if (valid) {
           			var path="customers/add"
                     if(this.form.id>0){
           			  path='customers/edit'
           		  }
           		  this.$http.post(path,this.form).then((response) => {
           		  		
           				Message({
           					type: 'success',
           					message: '保存成功'
           				});
           				 setTimeout(() => {
           					this.$router.push({ path:'/customer-info'})
           				}, 1500) 
           		  });
                   } else {
                       console.log('error submit!!');
                       return false;
                   }
               });
           },
        }
    }
</script>

<style lang="scss">
    .customer-tracking {
        padding-bottom: 50px;

        .grid-list {
            margin-bottom: 25px;

            .is-active {
                color: #333333 !important;
                font-weight: bold;
            }
        }

        .nine-btsss {
            width: 150px;
            margin-top: 20px;
        }
    }
</style>
